<template>
  <div>
    <div style="margin-bottom: 16px">
      <div>
        <a-button type="primary" icon="file" @click="showModal">
          上传项目
        </a-button>
        <a-modal
          title="上传文件"
          :visible="visibleUpload"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <a-upload-dragger
            name="file"
            :multiple="true"
            action="/api/project"
            method="post"
            @change="handleChange"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">点击或者拖拽项目文件到该区域以上传</p>
            <p class="ant-upload-hint">只支持单个上传以及.dsft.ini结尾的文件</p>
          </a-upload-dragger>
        </a-modal>
      </div>

      <a-tooltip placement="top">
        <template slot="title">
          <span>刷新列表</span>
        </template>
        <a-icon
          type="sync"
          style="font-size: 20px; float: right"
          @click="getProject"
        />
      </a-tooltip>
    </div>

    <a-table
      :columns="columns"
      :data-source="data"
      :row-key="(row) => row.id"
      :pagination="{ pageSize: 50 }"
      :scroll="{ y: this.tableHeight }"
    >
      <a slot="action" slot-scope="row">
        <a-tooltip placement="top">
          <template slot="title">
            <span>项目配置信息编辑</span>
          </template>
          <a-icon
            type="edit"
            theme="twoTone"
            style="font-size: 20px"
            @click="showDrawer(row)"
          />
        </a-tooltip>
        <a> {{ "  |  " }}</a>
        <a-tooltip placement="top">
          <template slot="title">
            <span>下载项目</span>
          </template>
          <a-icon
            type="file-zip"
            theme="twoTone"
            style="font-size: 20px"
            @click="getProjectResource(row.id)"
          />
        </a-tooltip>
        <a> {{ "  |  " }}</a>
        <a-tooltip placement="top">
          <template slot="title">
            <span>删除该项目</span>
          </template>
          <a-icon
            type="delete"
            theme="twoTone"
            style="font-size: 20px"
            two-tone-color="red"
            @click="showDeleteConfirm(row.id)"
          />
        </a-tooltip>
      </a>
    </a-table>
    <div>
      <router-view
        :projectData="projectData"
        :visibleDrawer="visibleDrawer"
        :getProject="getProject"
        :onClose="onClose"
      ></router-view>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "编号",
    dataIndex: "id",
    sorter: true,
    width: 80,
  },
  {
    title: "项目名称",
    dataIndex: "name",
    sorter: true,
    width: 300,
  },
  {
    title: "更新时间",
    dataIndex: "update_time",
    sorter: true,
    width: 200,
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Project",
  data() {
    return {
      columns,
      tableHeight: "300px",
      projectData: {},
      data: [],
      visibleUpload: false,
      visibleDrawer: false,
      confirmLoading: false,
      cacheId: -1,
    };
  },
  methods: {
    showDeleteConfirm(id) {
      let self = this;
      this.$confirm({
        title: "你确定要删除这条数据？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          self.deleteProjectById(id);
        },
        onCancel() {
          self.infoMessage("已取消删除操作");
        },
        class: "test",
      });
    },
    showDrawer(row) {
      this.projectData = row;
      this.visibleDrawer = true;
    },
    onClose() {
      this.visibleDrawer = false;
    },
    showModal() {
      this.visibleUpload = true;
    },
    // eslint-disable-next-line no-unused-vars
    handleOk(e) {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleUpload = false;
        this.confirmLoading = false;
        this.getProject();
      }, 500);
    },
    // eslint-disable-next-line no-unused-vars
    handleCancel(e) {
      this.visibleUpload = false;
      if (this.cacheId !== -1) {
        this.deleteProjectById(this.cacheId);
      }
      this.cacheId = -1;
    },
    handleChange(info) {
      let _res = info.file.response;
      const status = info.file.status;
      if (status === "done") {
        if (_res.code === "200") {
          this.$message.success(`${info.file.name} 上传成功`);
          this.cacheId = _res.data;
        } else {
          this.errMessage(`${info.file.name} 上传失败，${_res.msg}`);
        }
      } else if (status === "error") {
        this.errMessage(`${info.file.name} 上传失败`);
      }
    },
    getTableHeight() {
      let HeaderHeight = 64;
      let FooterHeight = 50;
      let OtherHeight = 120 + 16 + 32 + 5;
      return window.innerHeight - (HeaderHeight + FooterHeight + OtherHeight);
    },
    async getProject() {
      this.data = await this.ProjectService.getProject();
      this.infoMessage("更新数据列表");
    },
    async getProjectResource(projectId) {
      let _res = await this.ProjectService.getProjectResource(projectId);
      if (_res.code === "200") {
        return this.successMessage(_res.msg);
      }
      this.errMessage(_res.msg);
    },
    async deleteProjectById(projectId) {
      let code = await this.ProjectService.deleteProjectById(projectId);
      if (code.toString() === "200") {
        this.infoMessage("删除项目操作成功");
      } else {
        this.warnMessage("项目删除失败，项目可能不存在");
      }
      await this.getProject();
    },
    infoMessage(Message) {
      this.$message.info(Message);
    },
    warnMessage(Message) {
      this.$message.warn(Message);
    },
    errMessage(Message) {
      this.$message.error(Message);
    },
    successMessage(Message) {
      this.$message.success(Message);
    },
  },
  mounted() {
    this.getProject();
    this.tableHeight = this.getTableHeight();
    window.onresize = () => {
      return (() => {
        this.tableHeight = this.getTableHeight();
      })();
    };
  },
};
</script>

<style scoped></style>
